<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="crumbs">
                    <el-breadcrumb separator=">" style="margin-top: 10px;">
                        <el-breadcrumb-item>申请管理</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/' }">易耗品领用申请</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/' }">发起领用申请</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>

            
                <el-col :span="24">
                    <div class="contener boderSet">
                        <div class="grid-content bg-purple-dark">
                        <el-button class="fanhui">返回</el-button><br>
                        <el-button type="primary" icon="el-icon-plus"
                            style="padding: 12px;background-color:#343961">加入领用申请单</el-button>
                        <el-input v-model="input" placeholder="请输入内容" style="width: 400px; margin-left:20px;"></el-input>
                        <el-button type="primary" style="background-color:#343961;">查询</el-button>
                    <!-- </div>
                </el-col> -->
          
            <!-- <el-col :span="24">
                <div class="grid-content bg-purple-dark"> -->
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                        style="width: 100%; margin-top: 30px;" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column property="classify" label="分类"  header-align="center" align="center" width="170"> </el-table-column>
                        <el-table-column property="name" label="名称" header-align="center" align="center"> </el-table-column>
                        <el-table-column property="encode" label="编码" header-align="center" align="center"></el-table-column>
                        <el-table-column property="unitprice" label="单价" header-align="center" align="center"></el-table-column>
                        <el-table-column property="Available" label="数量"  header-align="center" align="center"></el-table-column>
                        <el-table-column property="specification" label="规格"  header-align="center" align="center"></el-table-column>
                        <el-table-column property="Storage" label="存放地点"  header-align="center" align="center"></el-table-column>
                        
                        <el-table-column property="date" label="入库时间"  header-align="center" align="center"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-size="pageSize" :total="total"
                            style="margin-left: 920px;margin-top: 10px;">
                        </el-pagination>
                    </div>   
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <div class="contener boderSet">
                <div class="grid-content bg-purple-dark">
                    <div style="margin-top: 30px;">易耗品领用申请单</div>
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                        style="width: 100%; margin-top: 30px;" @selection-change="handleSelectionChange">

                        <el-table-column property="classify" label="分类"  header-align="center" align="center" width="170"> </el-table-column>
                        <el-table-column property="name" label="名称"  header-align="center" align="center"> </el-table-column>
                        <el-table-column property="encode" label="编码"  header-align="center" align="center"></el-table-column>
                        <el-table-column property="unitprice" label="单价"  header-align="center" align="center"></el-table-column>
                        <el-table-column property="Available" label="可用数量"  header-align="center" align="center"></el-table-column>
                        <el-table-column property="specification" label="规格"  header-align="center" align="center"></el-table-column>
                        <el-table-column property="Storage" label="存放地点"  header-align="center" align="center"></el-table-column>
                       
                        <el-table-column property="date" label="入库时间"  header-align="center" align="center"></el-table-column>
                        <el-table-column property="num" label="领用数量" width="200" header-align="center" align="center">
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.num" :min="1"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="danger" icon="el-icon-delete" circle></el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                    <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChanga"
                            :current-page.sync="currentPage1" :page-size="pageSize1" :total="total1"
                            style="margin-left: 920px;margin-top: 10px;">
                        </el-pagination>
                    <el-button type="primary" style="margin-left: 700px;margin-top: 20px;"
                        @click="dialogFormVisible = true">提交申请</el-button>
                </div>
            </div>
            </el-col>
        </el-row>

        <el-dialog title="申请详情" :visible.sync="dialogFormVisible" :width="'1300px'">
            <el-form :model="form" ref="form" :rules="rules">
            <el-table :data="tableData">
                <el-table-column property="classify" label="分类"  header-align="center" align="center" width="170"></el-table-column>
                <el-table-column property="name" label="名称"  header-align="center" align="center"></el-table-column>
                <el-table-column property="encode" label="编码"  header-align="center" align="center"></el-table-column>
                <el-table-column property="unitprice" label="单价（元）" header-align="center" align="center"></el-table-column>
                <el-table-column property="Available" label="可用数量"  header-align="center" align="center"></el-table-column>
                <el-table-column property="specification" label="规格" header-align="center" align="center"></el-table-column>
                <el-table-column property="Storage" label="存放地点"  header-align="center" align="center"></el-table-column>
              
              
                <el-table-column property="Borrowed" label="领用数量"  header-align="center" align="center"></el-table-column>
            </el-table>
            <el-form-item prop="region">
                    <span>备注：</span>
                    <el-input placeholder="请输入内容" v-model="input" style="width: 520px;margin-top: 20px; margin-left:77px ;"
                        clearable>
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="margin-right: 580px;">
                <el-button @click="dialogFormVisible = false">返回重新编辑</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>


export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 10,
            total: 200,
            currentPage1: 1,
            pageSize1: 10,
            total1: 200,
            num: 1,
            input: '',
            date1: '',
            date2: '',
            region: '',
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                date: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px',
            tableData: [{
                classify: '行政办公设备-桌椅类',
                name: '办公桌',
                encode: '03036752',
                unitprice: '100.00',
                Available: '12',
                specification: '普通',
                Storage: '库房1',
                sole: '否',
                date: '2016-05-03',

                Returntime: '2017-05-03',
                state: '通过'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                Returntime: '2017-05-03',
                state: '通过'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                Returntime: '2017-05-03',
                state: '通过'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                Returntime: '2017-05-03',
                state: '未通过'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                Returntime: '2017-05-03',
                state: '审核中'
            }],
            multipleSelection: []

        }
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleChange(value) {
            console.log(value);
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            console.log('当前页码：', currentPage);
        },
        handleCurrentChanga(currentPage1) {
            this.currentPage1 = currentPage1;
            console.log('当前页码：', currentPage1);
        },
    }
}
</script>
<style  scoped>
.fanhui {
    margin-top: 30px;
    margin-bottom: 20px;
}
.crumbs {
    margin: 10px 30px;
}

.contener {
    margin: 20px 30px;
    padding: 30px;
}

.boderSet {
    border-radius: 10px !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
